<template>
  <div>
    <el-form ref="form"
             :model="form"
             :rules="rules"
             label-width="100px"
             class="demo-ruleForm"
             size="medium">
      <el-row>
        <el-col :xs="24"
                :sm="24"
                :md="24"
                :lg="24"
                :xl="24">
          <el-form-item label="请假事由"
                        prop="reason">
            <el-input v-model="form.reason"
                      placeholder="请输入请假事由"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24"
                :sm="24"
                :md="24"
                :lg="24"
                :xl="24">
          <el-form-item label="开始时间"
                        prop="start_time">
              <el-date-picker
                v-model="form.start_time"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy 年 MM 月 dd 日"
                placeholder="开始时间">
              </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24"
                :sm="24"
                :md="24"
                :lg="24"
                :xl="24">
          <el-form-item label="结束时间"
                        prop="end_time">
              <el-date-picker
                v-model="form.end_time"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy 年 MM 月 dd 日"
                placeholder="结束时间">
              </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24"
                :sm="24"
                :md="24"
                :lg="24"
                :xl="24">
          <el-form-item label="备注"
                        prop="note">
            <el-input v-model="form.note"
                      :rows="5"
                      type="textarea" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="form-footer"
         style="padding-left: 100px;">
      <el-button type="primary"
                 class="sureBtn"
                 size="mini"
                 @click="save">
        提 交
      </el-button>
      <el-button type="info"
                 class="setBtn"
                 size="mini"
                 @click="cancle">
        取 消
      </el-button>
    </div>
  </div>
</template>
<script>
  import { getelderleave } from "@/api/nursingcost";
  export default {
    props: {
      e_id:{
        type: Number,
        default(){
          return 0
        }
      }
    },
    data() {
      return {
        form: {},
        rules: {
          reason: [
            { required: true, message: "请输入请假事由", trigger: "blur" },
          ],
          start_time: [
            { required: true, message: "请选择开始时间", trigger: "blur" },
          ],
          end_time: [
            { required: true, message: "请选择结束时间", trigger: "blur" },
          ],
        }
      }
    },
    methods: {
      save() {
        this.$refs["form"].validate(async (valid) => {
          if (valid) {
            getelderleave("post", Object.assign(this.form, {e_id: this.e_id})).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "添加成功",
                });
                this.cancle();
              }
            });
          }
        });
      },
      cancle() {
        this.$emit("handleCancleLeave")
        this.form = {}
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-input{
    width: 100%;
  }
</style>